import React from 'react'
import { Icon } from 'antd'
import style from './style.module.scss'
import { BaseResultItem } from '../BaseResultItem'

type RaceResultItemProps = {
    readonly data: {
        readonly id: string;
        readonly time: {
            sign: {
                begin: string;
                end: string;
            };
            race: {
                begin: string;
                end: string;
            };
        };
        readonly host: string;
        readonly title: string;
        readonly img: string;
    };
}

interface RaceResultItemState {

}

const RaceResultCardInfo = (props: RaceResultItemProps) => {
    return (
        <section className={style.raceInfoList}>
            <h3>{props.data.title}</h3>
            <p className={style.host}><Icon type="android"/>{props.data.host}</p>
            <ul>
                <li>
                    <div>
                        <p><Icon type="clock-circle"/>开始时间</p>
                        <p>{props.data.time.sign.begin}</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p><Icon type="pause-circle"/>截止时间</p>
                        <p>{props.data.time.sign.end}</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p><Icon type="fire"/>比赛时间</p>
                        <p>{props.data.time.race.begin}</p>
                    </div>
                </li>
                <li>
                    <div>
                        <p><Icon type="crown"/>结束时间</p>
                        <p>{props.data.time.race.end}</p>
                    </div>
                </li>
            </ul>
        </section>
    )
}

export class RaceResultItem extends React.Component<RaceResultItemProps, RaceResultItemState> {
    render () {
        return (
            <BaseResultItem data={this.props.data} hover={true}>
                <RaceResultCardInfo data={this.props.data}/>
            </BaseResultItem>
        )
    }
}
